<template>
  <a-modal
    :title="`漫行者 动画部 等级表`"
    :width="900"
    :visible="visible"
    :confirmLoading="loading"
    :footer="null"
    @cancel="
      () => {
        $emit('cancel')
      }
    "
  >
    <a-spin :spinning="loading">
      <!-- <div class="level-table-title">漫行者•动画部•等级表</div> -->
      <a-table :columns="c_columns" :data-source="userLevels" bordered :pagination="false" size="small" :rowKey='(lists)=>lists.id'>
        <template slot="name" slot-scope="text">
          <a>{{ text }}</a>
        </template>

        <template slot="minPay" slot-scope="text, scope">
          <div >{{scope.levelNum > c_canSee ? '--': text}}</div>
          <!-- style="background-color:#fff000;" -->
        </template>
        <template slot="name" slot-scope="text">{{text}}
          <!-- <a-tag :color="color[(scope.levelNum%12)-1]"></a-tag> -->
        </template>
        
      </a-table>
      <div class="details-remark-wrap">
        <p>*注:</p>
        <p>连续三个月达不到本等级要求将会被降级</p>
        <p>累计满三个月达到下个等级要求则申请升级到下一等级</p>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import cloneDeep from 'lodash.clonedeep'

export default {
  data() {
    const columns = [
      {
        title: '等级',
        colSpan: 2,
        dataIndex: 'remark',
        customRender: (text, row, index) => {
          const obj = {
            children: text,
            attrs: {},
          }
          if (index == 1) {
            console.log(text, row, index)
            obj.attrs.rowSpan = 2
          }
          if (index == 3) {
            obj.attrs.rowSpan = 3
          }
          if (index == 6) {
            obj.attrs.rowSpan = 3
          }
          if ([2, 4, 5, 7, 8].indexOf(index) !== -1) {
            obj.attrs.rowSpan = 0
          }
          return obj
        },
      },
      {
        colSpan: 0,
        dataIndex: 'name',
        scopedSlots: { customRender: 'name' },
      },
      {
        title: '最低薪资',
        dataIndex: 'minPay',
        scopedSlots: { customRender: 'minPay' },
      },
    ]
    return {
      // color:['#BFBFBF','#95DDB2','#95DDB2','#2db7f5','#2db7f5','#2db7f5','#FFB37C','#FFB37C','#FFB37C','#FF6C00','#FF0000'],
      columns,
      loading: false,
    }
  },

  components: {},
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    userLevels: {
      type: Array,
      default:null
    },
    levelList: {
      type: Array,
      default:null
    },
    levelNum: {
      type: Number,
      default:null
    }
  },
  mounted() {},
  computed: {
    c_columns: function(){
      let c_columns = cloneDeep(this.columns)
      this.levelList.map(v=>{
        c_columns.push({
          title: v.name,
          dataIndex: v.id,
          customRender: (text) => text || '--',
        })
      })
      return c_columns
    },
    c_canSee: function(){
      let { levelNum } = this
      let it = ''
      this.userLevels.forEach(v => {
        if(v.levelNum > levelNum && !it){
          it = v.levelNum
        }
      });
      return it
    }
  },
  watch: {},
  methods: {},
  destroyed() {},
}
</script>
<style lang='less' scoped>
// .level-table-title {
//   background-color: #ffc000;
//   text-align: center;
//   border: 1px solid #e8e8e8;
//   border-bottom: none;
//   padding: 10px;
//   font-size: 16px;
// }
/deep/.ant-table-small {
  border-radius: 0;
  & > .ant-table-content > .ant-table-body {
    margin: 0;
    .ant-table-thead {
      
      tr>th{
        background-color: #D2D3D5;
      }
    }
  }
}
/deep/.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
    background: transparent;
}
/deep/ .ant-table-tbody > tr{
  color: #fff;
    td{
        border-color: #ffffff50;
      }
    &:nth-child(1){
      background-color: #BFBFBF;
    }
    &:nth-child(2),
    &:nth-child(3){
      background-color: #95DDB2;
    }
    // &:nth-child(3){
    //   background-color: #95DDB260;
    // }

    &:nth-child(4),
    &:nth-child(5),
    &:nth-child(6){
      background-color: #92D1E5;
    }
    // &:nth-child(5){
    //   background-color: #2DB7F550;
    // }

    &:nth-child(7),
    &:nth-child(8),
    &:nth-child(9){
      background-color: #FFB37C;
    }
    // &:nth-child(8){
    //   background-color: #FFB37C50;
    // }
    &:nth-child(10)
    {
        background-color: #Fe9349;
    }
    &:nth-child(11)
    {
        background-color: #ff4d4f;
    }
}
.details-remark-wrap{
  margin-top: 24px;
  width: 100%;
  p{
    display: block;
    width: 100%;
    font-size: 10px;
  }
}

</style>